<template>
  <div :class="{ login_wrap: true, active: showStatusStore().loginWStatus }">
    <div class="logo_input">
      <div class="ranyu_logo">
        <img src="../../../src/assets/ranyu_logo.png" alt="" />
      </div>
      <div class="ranyu_input">
        <!-- 用户登录组件 -->
        <UserLogin v-if="!userStatus" @change="changeMethod"></UserLogin>
        <!-- 用户注册组件 -->
        <userRegistration v-else @change="changeMethod"></userRegistration>
      </div>
    </div>
    <div :class="{ right_image: true, activeBg: showStatusStore().loginWStatus }">
      <div :class="{ right_bg: true, right_before: showStatusStore().loginWStatus }">
        <img src="../../assets/login/ranyu_bg.png" alt="" />
      </div>
    </div>
    <DiaLogtoregister @change="changeMethod" />
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const userStatus = ref(false); //登陆与注册控制
import DiaLogtoregister from "./components/DiaLogtoregister.vue";
import showStatusStore from "@/store/modules/protocolDisplayStatus";
import UserLogin from "./components/UserLogin.vue"; //用户登录组件
import NProgress from "@/utils/nprogress";
import userRegistration from "./components/UserRegistration.vue"; //用户注册组件
// 定义颜色模式类型

// 监听系统颜色模式变化
// const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");

// // 初始状态检测
// const isDarkMode = mediaQuery.matches;

// // 事件监听
//  mediaQuery.addEventListener("change", (event) => {
//   const newIsDarkMode = event.matches;
//   console.log(`深色模式状态变化: ${newIsDarkMode ? "开启" : "关闭"}`);
//   // 在这里更新你的应用样式或逻辑
//   updateTheme(newIsDarkMode);
// });

// // 主题更新函数
// function updateTheme(isDark) {
//   document.body.style.backgroundColor = isDark ? "#1a1a1a" : "#ffffff";
//   document.body.style.color = isDark ? "#ffffff" : "#000000";
// }

const changeMethod = (data: boolean) => {
  NProgress.start();
  userStatus.value = data;
  NProgress.done();
};
</script>
<style lang="scss" scoped>
.ranyu_logo {
  position: fixed;
  top: 47px;
  left: 158px;
  // height: max-content;
  display: flex;
  justify-content: center;

  img {
    width: 220px;
  }
}

.ranyu_input {
  width: 35%;
}

.login_wrap {
  user-select: none;
  padding: 28px;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;

  >.logo_input {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 2;
  }

  >.right_image {
    flex: 1.3;

    >.right_bg {
      display: flex;

      img {
        width: 100%;
      }

      width: 100%;
    }
  }
}

@media (max-width: 766px) {
  .ranyu_logo {
    margin-bottom: 100px;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;

    img {
      width: 60%;
    }
  }

  .ranyu_input {
    width: 90%;
  }

  .right_image {
    display: none;
  }
}
</style>
